<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 实现一个表单注册提交验证 ，表单包含 姓名、密码、邮箱、电话，符合规则可以提交
    否则提示不能提交 名字 ：中文 且 2-4个字符 [\u4e00-\u9fa5] 手机号 ： 1开头
    第二位是3456789 且 11位 邮箱： 数字字母下划线构成
    @数字字母(2-多个).2-4字母.2-4字母（可有可无） fdaf12_fds@qq.com.cn qq号
    ：开头1-9 中间 0-9 最少5位 最多11位 -->
    <form action="">
      姓名： <input type="text" class="username" />
      <span class="info">提示信息</span><br />
      手机号：<input type="text" class="phone" />
      <span class="info1">提示信息</span><br />
      密码： <input type="text" class="password" />
      <span class="info2">提示信息</span><br />
      QQ号： <input type="text" class="qq" /> <span class="info3">提示信息</span
      ><br />
      邮箱： <input type="text" class="emali" />
      <span class="info4">提示信息</span><br />

      <input type="submit" class="box" /><br />
    </form>
    <script>
      var userEle = document.querySelector(".username");
      var infoEle = document.querySelector(".info");
      var infoEle1 = document.querySelector(".info1");
      var infoEle2 = document.querySelector(".info2");
      var infoEle3 = document.querySelector(".info3");
      var infoEle4 = document.querySelector(".info4");
      var emaliEle = document.querySelector(".emali");
      var phoneEle = document.querySelector(".phone");
      var passEle = document.querySelector(".password");
      var submitEle = document.querySelector(".box");
      var qqEle = document.querySelector(".qq");
      userEle.onblur = function () {
        var val = userEle.value;
        var reg = /^[\u4e00-\u9fa5]{2,4}$/g;
        if (reg.test(val)) {
          infoEle.innerHTML = "符合规则";
          infoEle.style.color = "green";
        } else {
          infoEle.innerHTML = "不符合规则";
          infoEle.style.color = "red";
        }
      };
      phoneEle.onblur = function () {
        var reg1 = /^1[3-9]\d{9}$/g;
        var val1 = phoneEle.value;
        if (reg1.test(val1)) {
          infoEle1.innerHTML = "符合规则";
          infoEle1.style.color = "green";
        } else {
          infoEle1.innerHTML = "不符合规则";
          infoEle1.style.color = "red";
        }
      };
      passEle.onblur = function () {
        var reg2 = /^\d{8}|[a-z]{8,}$/;
        var reg3 = /^(\d|[a-z]){8,}$/;
        var reg4 = /^(\w|[A-Z]){8,}$/;
        var val2 = passEle.value;
        if (reg2.test(val2)) {
          infoEle2.innerHTML = "密码强度低";
          infoEle2.style.color = "green";
        } else if (reg3.test(val2)) {
          infoEle2.innerHTML = "密码强度中";
          infoEle2.style.color = "yellow";
        } else if (reg4.test(val2)) {
          infoEle2.innerHTML = "密码强度高";
          infoEle2.style.color = "orange";
        } else {
          infoEle2.innerHTML = "密码格式不正确";
          infoEle2.style.color = "red";
        }
      };
      qqEle.onblur = function () {
        var reg5 = /^[1-9]\d{4,10}$/;
        var val5 = qqEle.value;
        if (reg5.test(val5)) {
          infoEle3.innerHTML = "符合规则";
          infoEle3.style.color = "green";
        } else {
          infoEle3.innerHTML = "不符合规则";
          infoEle3.style.color = "red";
        }
      };
      emaliEle.onblur = function () {
        var reg6 = /^\w{2,}@(\d|a-z){2,}\.[a-z]{2,4}|(\.[a-z]{2,4})$/;
        var val6 = emaliEle.value;
        if (reg6.test(val6)) {
          infoEle4.innerHTML = "符合规则";
          infoEle4.style.color = "green";
        } else {
          infoEle4.innerHTML = "不符合规则";
          infoEle4.style.color = "red";
        }
      };
    </script>
  </body>
</html>
